安装
npm install axios最后通过 axios 测试接口！！！
axios 二次封装
在开发项目的时候避免不了与后端进行交互,因此我们需要使用 axios 插件实现发送网络请求。在开发项目的时候
我们经常会把 axios 进行二次封装。
目的:
1:使用请求拦截器，可以在请求拦截器中处理一些业务(开始进度条、请求头携带公共参数)
2:使用响应拦截器，可以在响应拦截器中处理一些业务(进度条结束、简化服务器返回的数据、处理 http 网络错误)
在根目录下创建 utils/request.ts
// 进行axios二次封装:使用请求与响应拦截器// 引入axios和axios的类型定义import axios, { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse,} from "axios";import { ElMessage } from "element-plus";//第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)const request: AxiosInstance = axios.create({ //基础路径 baseURL: import.meta.env.VITE_APP_BASE_API, //基础路径上会携带/api timeout: 5000, //超时的时间的设置});//第二步:request实例添加请求与响应拦截器request.interceptors.request.use( (config: InternalAxiosRequestConfig) => {//config配置对象,headers属性请求头,经常给服务器端携带公共参数//返回配置对象return config; }, (error: any) => {// 处理请求错误console.error(error);return Promise.reject(error); });//第三步:响应拦截器request.interceptors.response.use( (response: AxiosResponse) => {//成功回调//简化数据return response.data; }, (error) => {// 处理响应错误//失败回调:处理http网络错误的//定义一个变量:存储网络错误信息let message = "";//http状态码const status = error.response.status;switch (status) { case 401:message = "TOKEN过期";break; case 403:message = "无权访问";break; case 404:message = "请求地址错误";break; case 500:message = "服务器出现问题";break; default:message = "网络出现问题";break;}//提示错误信息ElMessage({ type: "error", message,});return Promise.reject(error); });//对外暴露export default request;使用src\api\user\index.ts
// 引入封装好的axios实例import request from "@/utils/request";// 定义一个接口，用于规范用户的数据类型interface User { id: number; name: string; age: number; email: string; avatar: string;}// 定义一个函数，用于获取用户列表export function getUserList(): Promise { return request({url: "/user/list",method: "get", });}测试代码
import { onMounted } from "vue";import { getUserList } from "@/api/user";//组件挂载完毕onMounted(() => { getUserLists();});//获取全部已有的用户信息const getUserLists = async () => { let result = await getUserList(); console.log(result);};API 接口统一管理在 src 目录下去创建 api 文件夹去统一管理项目的接口；
比如:下面方式
// responseTpe.ts// 定义一个接口，用于规范响应数据的格式export interface ResponseData { code: number; data: T; message: string;}// type.tsimport type { ResponseData } from "@/api/responseTpe";// 定义一个接口，用于规范用户的数据类型export interface userInfoListReponseData extends ResponseData { data: {id: number;name: string;age: number;email: string;avatar: string; };}// index.ts// 引入封装好的axios实例import request from "@/utils/request";import type { userInfoListReponseData } from "./type";//项目用户相关的请求地址enum API { USERINFO_LIST_URL = "/user/list",}// 用于获取用户列表export const getUserList = () => { return request.get(API.USERINFO_LIST_URL);};